<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="js/elementui/index.css">
    <script src="js/vue.js"></script>
    <script src="js/elementui/index.js"></script>
    <script src="js/axios.min.js"></script>
    <style>
        * {
            font-family: Roboto, Helvetica Neue, Arial, sans-serif;
        }

        html, body {
            background-color: rgb(248, 248, 248);
        }

        .chan-avthor {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            border: 5px solid rgb(238, 162, 11);
        }

        .authdiv .authoto {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            border: 5px solid rgb(238, 162, 11);
        }

        .label {
            font-size: 14px;
            color: #9a9a9a;
        }

        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }

        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app">
    <el-button  type="success" @click="changePassword">修改密码</el-button>
    <el-button icon="el-icon-refresh" type="primary" onclick=" window.location.reload();">刷新</el-button>
    <el-row :gutter="50" style="margin-top: 15px;">
        <el-col :span="16">
            <el-card class="box-card">
                <div>
                    <span style="font-size: 20px;font-weight:lighter;">编辑个人资料</span>
                </div>
                <el-row :gutter="50" style="margin-top: 20px;">
                    <el-col :span="8">
                        <span class="label">头像:</span>
                        <el-upload class="avatar-uploader" action="/api/oss/upload"
                                   drag
                                   :show-file-list="false"
                                   :data="personalData"
                                   :on-success="AvatarSuccess"
                                   :headers="authHead"
                                   :before-upload="beforeAvatarUpload">
                            <i  class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-col>
                </el-row>
                <el-row :gutter="50" style="margin-top: 50px;">
                    <el-col :span="8">
                        <span class="label">工号:</span>
                        <el-input disabled size="large" v-model="active.teaNumber"></el-input>
                    </el-col>
                    <el-col :span="8">
                        <span class="label">用户名:</span>
                        <el-input disabled size="large" v-model="active.loginName"></el-input>
                    </el-col>
                    <el-col :span="8">
                        <span class="label">手机号:</span>
                        <el-input size="large" v-model="active.protectMTel"></el-input>
                    </el-col>
                </el-row>
                <el-row :gutter="50" style="margin-top: 50px;">
                    <el-col :span="8">
                        <span class="label">电子邮件地址:</span>
                        <el-input size="large" v-model="active.protectEMail"></el-input>
                    </el-col>
                    <el-col :span="8">
                        <span class="label">性别:</span>
                        <br/>
                        <el-select v-model="active.teaSex" placeholder="请选择">
                            <el-option label="男" value="男">
                            </el-option>
                            <el-option label="女" value="女">
                            </el-option>
                            <el-option label="保密" value="保密">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="8">
                        <span class="label">院系:</span>
                        <br/>
                        <el-select v-model="active.teaDepartmentid" placeholder="请选择">
                            <el-option v-for="item in departmentData"
                                       :key="item.departmentId"
                                       :label="item.name"
                                       :value="item.departmentId">
                            </el-option>
                        </el-select>
                    </el-col>
                </el-row>
                <el-row :gutter="50" style="margin-top: 50px;">
                    <el-col :span="24">
                        <span class="label">个人描述:</span>
                        <el-input size="large" type="textarea" v-model="active.teaDescribe">

                        </el-input>
                    </el-col>
                </el-row>
                <el-row :gutter="50" type="flex" justify="end" style="margin-top: 20px;">
                    <el-col :span="6">
                        <el-button type="primary" @click="updateTea">更新个人信息</el-button>
                    </el-col>
                </el-row>
            </el-card>
        </el-col>
        <el-col :span="8">
            <el-card class="box-card">
                <div class="authdiv" style="display: flex;justify-content: center;">
                    <img class="authoto" :src="active.teaPhoto" onerror="this.src='img/teaphoto.jpg'" :alt="active.loginName" />
                </div>
                <div style="display: flex;justify-content: center;margin-top: 10px;">
                    <span style="font-size: 30px;">{{active.loginName}}</span>
                </div>
                <div style="display: flex;justify-content: center;margin-top: 10px;">
                    <p style="font-size: 20px;font-weight:lighter;width: 12em;text-align:center;">
                        {{active.teaDescribe}}
                    </p>
                </div>
            </el-card>
        </el-col>
    </el-row>
    <div>
        <el-dialog
                title="修改密码"
                :visible.sync="upPsd.show">
            <el-form :model="upPsd" status-icon :rules="upPsdRule" ref="upPsdForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="原密码" prop="oldPass">
                    <el-input type="password" v-model="upPsd.oldPass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="pass">
                    <el-input type="password" v-model="upPsd.pass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass">
                    <el-input type="password" v-model="upPsd.checkPass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitPass">提交</el-button>
                    <el-button @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</div>
</body>
<script>
    axios.defaults.headers.common['Authorization'] = "bearer " + sessionStorage.getItem("access_token");
    axios.defaults.headers.common['Content-Type'] = 'application/json;charset=UTF-8';

    let Main = {
        data() {

            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.upPsd.checkPass !== '') {
                        this.$refs.upPsdForm.validateField('checkPass');
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.upPsd.pass) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };

            return {
                userId: '',
                active: {},
                departmentData: [],
                //上传文件附加额外参数
                personalData:{
                    path:''
                },
                //上传文件附加额外请求头参数
                authHead:{
                    Authorization:"bearer " + sessionStorage.getItem("access_token")
                },
                upPsd:{
                    show:false,
                    pass:'',
                    checkPass:'',
                    oldPass:''
                },
                upPsdRule:{
                    pass: [
                        { required: true, message: '请输入新密码', trigger: 'blur' },
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    checkPass: [
                        { required: true, message: '请再次输入密码', trigger: 'blur' },
                        { validator: validatePass2, trigger: 'blur' }
                    ],
                    oldPass:[
                        { required: true, message: '请输入原密码', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            //提交密码
            submitPass(){
                this.$refs['upPsdForm'].validate((valid) => {
                    if (valid) {
                        let params=new URLSearchParams();
                        params.append("oldPass",this.upPsd.oldPass);
                        params.append("password",this.upPsd.pass);
                        axios({
                            method:'put',
                            url:'/api/admin/user/updatePassword/'+this.userId,
                            data:params
                        }).then(res=>{
                            res=res.data;
                            if(res.success){
                                this.$message({
                                    type:'success',
                                    message:res.message
                                })
                                this.upPsd.show=false;
                                top.location.href = "/login.html"
                            }else{
                                this.$message({
                                    type:'error',
                                    message:res.message
                                })
                            }
                        })
                    } else {
                        this.$message({
                            type:'error',
                            message:'请检查字段'
                        })
                        return false;
                    }
                });
            },
            //重置密码
            resetForm(){
                this.$refs['upPsdForm'].resetFields();
            },
            //修改密码
            changePassword(){
                this.upPsd.show=true;
            },
            updateTea(){
                axios({
                    method:'put',
                    url:'/api/teacher/tea/updateTeacher',
                    data:this.active
                }).then(res=>{
                    res=res.data;
                    this.$message({
                        type:"success",
                        message:'修改成功',
                    })

                })
            },
            AvatarSuccess(response){
               this.active.teaPhoto=response.message.path;
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                this.personalData.path="teaHead/"+file.uid+file.name;
                return isJPG && isLt2M;
            },
            //查询教师
            queryTeacher() {
                axios({
                    method: 'get',
                    url: '/api/teacher/tea/QueryTeacherByid',
                    params: {
                        id: this.userId
                    }
                }).then(res => {
                    let o=res.data.message[0];
                    if(o.teaPhoto==null || o.teaPhoto==""){
                        o.teaPhoto='img/teaphoto.jpg'
                    }
                    this.active=o;
                })
            },
            //查询所有院系
            queryDepart() {
                axios({
                    method: 'get',
                    url: '/api/student/curricularTaxonomy/getCurricularTaxonomy',
                }).then(res => {
                    this.departmentData = res.data.message;
                })
            }
        },
        mounted() {
            this.userId = sessionStorage.getItem("userid");
            this.queryTeacher();
            this.queryDepart();
        }
    }
    var Component = Vue.extend(Main)
    new Component().$mount('#app')
</script>
</html>